import{d as t,M as l,A as c,h as r}from"./Anchors-CRD96j4l.js";import{D as a,a as i}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const s={path:"/form/treeselect",name:"treeselect",title:"TreeSelect 树选择"};function n(d){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...d.components};return l(r,{children:[l("div",{class:"sys-ctx-main-left",children:[l(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),s.title]}),l(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(a,{columns:2}),t(i,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { TreeSelect } from "cui-solid"

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <TreeSelect data={data}/>
}`,scopes:void 0,children:t(e.p,{children:"基础用法"})}),t(i,{id:"disabled",title:"禁用",src:"2disabled.demo.tsx",code:`import { TreeSelect } from "cui-solid"

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <TreeSelect data={data} disabled/>
}`,scopes:void 0,children:l(e.p,{children:["使用 ",t(e.code,{className:"sp-inline-code",children:"disabled"})," 进行禁用"]})}),t(i,{id:"size",title:"尺寸",src:"3size.demo.tsx",code:`import { Col, Row, TreeSelect } from "cui-solid"

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <Row>
        <Col grid={0.33}>
            <TreeSelect data={data} size="small"/>
        </Col>
        <Col grid={0.33}>
            <TreeSelect data={data}/>
        </Col>
        <Col grid={0.33}>
            <TreeSelect data={data} size="large"/>
        </Col>
    </Row>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"size"})," 支持 ",t(e.code,{className:"sp-inline-code",children:"small"})," ",t(e.code,{className:"sp-inline-code",children:"large"})]})}),t(i,{id:"clearable",title:"可清空",src:"4clearable.demo.tsx",code:`import { TreeSelect } from "cui-solid"

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <TreeSelect data={data} clearable/>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"clearable"})," 可清空选择数据"]})}),t(i,{id:"prepend",title:"前缀",src:"5prepend.demo.tsx",code:`import { Icon, TreeSelect } from "cui-solid"

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <TreeSelect prepend={<Icon name="tag"/>} data={data} clearable/>
}`,scopes:void 0,children:l(e.p,{children:["使用 ",t(e.code,{className:"sp-inline-code",children:"prepend"})," 可添加前缀"]})}),t(i,{id:"multi",title:"多选",src:"6multi.demo.tsx",code:`import { TreeSelect } from "cui-solid"

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <TreeSelect multi data={data} clearable/>
}`,scopes:void 0,children:l(e.p,{children:["使用 ",t(e.code,{className:"sp-inline-code",children:"multi"})," 为多选模式, 多选默认级联选择"]})}),t(i,{id:"relation",title:"多选非级联",src:"7relation.demo.tsx",code:`import { TreeSelect } from "cui-solid"

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <TreeSelect multi data={data} clearable checkRelation="unRelated" />
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"checkRelation"})," 支持 ",t(e.code,{className:"sp-inline-code",children:"unRelated"})," (非级联) 和 ",t(e.code,{className:"sp-inline-code",children:"related"})," (级联) 默认 ",t(e.code,{className:"sp-inline-code",children:"related"})]})}),t(i,{id:"showMax",title:"显示个数",src:"8showMax.demo.tsx",code:`import { TreeSelect } from "cui-solid"

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <TreeSelect multi data={data} clearable checkRelation="unRelated" showMax={2}/>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"showMax"})," 可以设置最多显示的个数"]})}),t(i,{id:"valueClosable",title:"值可关闭",src:"9valueClosable.demo.tsx",code:`import { TreeSelect } from "cui-solid"

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <TreeSelect multi data={data} valueClosable clearable checkRelation="unRelated" />
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"valueClosable"})," 支持 选择的值可以进行关闭"]})}),t(i,{id:"mode",title:"选择模式",src:"10mode.demo.tsx",code:`import { Space, TreeSelect } from "cui-solid"

export default () => {
    const data = [
        {id: 'beijing', title: '北京', children: [
            {id: 'gugong', title: '故宫'},
            {id: 'tiantan', title: '天坛'},
        ]},
        {id: 'zhejiang', title: '浙江', children: [
            {id: 'xihu', title: '西湖'},
            {id: 'linyin', title: '灵隐'},
        ]},
    ]

    return <Space dir="v">
        <div>Leaf:</div>
        <TreeSelect multi data={data} clearable mode="Leaf" />
        <div>Shallow:</div>
        <TreeSelect multi data={data} clearable mode="Shallow" />
        <div>All:</div>
        <TreeSelect multi data={data} clearable mode="All" />
    </Space>
}`,scopes:void 0,children:l(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"mode"})," 支持 ",t(e.code,{className:"sp-inline-code",children:"All"})," 、 ",t(e.code,{className:"sp-inline-code",children:"Half、"})," ",t(e.code,{className:"sp-inline-code",children:"Leaf、"})," ",t(e.code,{className:"sp-inline-code",children:"Shallow"})," 默认为 ",t(e.code,{className:"sp-inline-code",children:"Half"})]})}),l(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),l(e.tbody,{children:[l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"data"}),t(e.td,{style:{textAlign:"left"},children:"源数据"}),t(e.td,{style:{textAlign:"left"},children:"Array"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"disabled"}),t(e.td,{style:{textAlign:"left"},children:"禁用"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"clearable"}),t(e.td,{style:{textAlign:"left"},children:"可清空"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"prepend"}),t(e.td,{style:{textAlign:"left"},children:"前缀"}),t(e.td,{style:{textAlign:"left"},children:"JSXElement"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"mode"}),t(e.td,{style:{textAlign:"left"},children:"值的选择模式"}),t(e.td,{style:{textAlign:"left"},children:"All | Half | Leaf | Shallow"}),t(e.td,{style:{textAlign:"left"},children:"Half"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"size"}),t(e.td,{style:{textAlign:"left"},children:"尺寸"}),t(e.td,{style:{textAlign:"left"},children:"small | large"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"transfer"}),t(e.td,{style:{textAlign:"left"},children:"下拉使用Portal渲染"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"showMax"}),t(e.td,{style:{textAlign:"left"},children:"最多显示个数"}),t(e.td,{style:{textAlign:"left"},children:"number"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"value"}),t(e.td,{style:{textAlign:"left"},children:"可控值"}),t(e.td,{style:{textAlign:"left"},children:"Signal"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"multi"}),t(e.td,{style:{textAlign:"left"},children:"多选，显示复选框"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"directory"}),t(e.td,{style:{textAlign:"left"},children:"显示目录图标"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"checkRelation"}),t(e.td,{style:{textAlign:"left"},children:"选择框的级联关系"}),t(e.td,{style:{textAlign:"left"},children:"related | unRelated"}),t(e.td,{style:{textAlign:"left"},children:"related"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"align"}),t(e.td,{style:{textAlign:"left"},children:"下拉的位置"}),t(e.td,{style:{textAlign:"left"},children:"bottomLeft | bottomRight"}),t(e.td,{style:{textAlign:"left"},children:"bottomLeft"})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"valueClosable"}),t(e.td,{style:{textAlign:"left"},children:"值可关闭"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"placeholder"}),t(e.td,{style:{textAlign:"left"},children:"placeholder"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"showMore"}),t(e.td,{style:{textAlign:"left"},children:"是否鼠标滑过显示隐藏的值"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onChange"}),t(e.td,{style:{textAlign:"left"},children:"复选框选中事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),l(e.h2,{id:"events",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:t(e.span,{className:"icon icon-link"})}),"事件 "]}),l(e.table,{className:"sp-table",children:[t(e.thead,{children:l(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),t(e.tbody,{children:l(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"onChange"})}),t(e.td,{style:{textAlign:"left"},children:"值改变事件"}),t(e.td,{style:{textAlign:"left"},children:"value"})]})})]})]}),`
`,`
`,`
`,t(c,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"disabled",title:"禁用",src:"2disabled.demo.tsx"},{id:"size",title:"尺寸",src:"3size.demo.tsx"},{id:"clearable",title:"可清空",src:"4clearable.demo.tsx"},{id:"prepend",title:"前缀",src:"5prepend.demo.tsx"},{id:"multi",title:"多选",src:"6multi.demo.tsx"},{id:"relation",title:"多选非级联",src:"7relation.demo.tsx"},{id:"showMax",title:"显示个数",src:"8showMax.demo.tsx"},{id:"valueClosable",title:"值可关闭",src:"9valueClosable.demo.tsx"},{id:"mode",title:"选择模式",src:"10mode.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"events",depth:2,title:"事件"}]})]})}function x(d={}){const{wrapper:e}=d.components||{};return e?t(e,{...d,children:t(n,{...d})}):n(d)}export{x as default,s as frontmatter};
